@import "variables";
@import "mixins";

body {
  padding: 0;
  margin: 0;
  font-family: $base-font-family;
  font-size: $base-font-size;
  line-height: $base-line-height;
  color: $font-color;
  background: #f0efe7 url($baseurl + "images/bg/body.jpg");
}

// windows chrome makes a mess of Adelle web font
.windows.chrome body,
.windows.ie8 body {
  font-family: $base-font-family-fallback !important;
}

// High level structure
.inner {
  @include clearfix;
  position: relative;
  width: $page-width;
  margin: 0 auto;
  overflow: visible;
}

aside {
  float: left;
  width: 218px;
  margin-bottom: 35px;
}

#content {
  float: right;
  width: 702px;
}

#main {
  padding: 22px;
  margin-bottom: 35px;
  background-color: $main-bg;
  border: solid 1px #e2e0d8;
  @include border-radius(5px);

  .two-column {
    @include clearfix;

    .column-left {
      width: 47%;
      float: left;
    }

    .column-right {
      width: 47%;
      float: right;
    }
  }

  .callout {
    background-color: $callout-color;
    @include border-radius(3px);
    padding: 8px 14px 4px;
    margin-bottom: 1.4em;

    p {
      margin-bottom: 0;
    }
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

#masthead {
  height: 295px;
  margin-top: -20px;
  margin-bottom: 2em;
  @include background-image-2x($baseurl + "images/bg/isometric-grid", 35px, 21px, top right, repeat);

  .inner {
    padding-top: 20px;

    p {
      width: 558px;
      margin-bottom: 1.2em;
      font-size: 18px;
      line-height: $base-line-height * 1.2;
    }

    .promo {
      font-weight: bold;

      img {
        position: relative;
        top: -6px;
      }
    }

    img.illustration {
      position: absolute;
      right: -30px;
      top: 24px;
    }
  }
}

// Header
header {
  position: relative;
  padding-bottom: 26px;
  margin-top: 14px;

  #tagline {
    position: absolute;
    top: 11px;
    left: 120px;
    display: block;
    margin-top: 1px;
    font-size: 24px;
    line-height: 24px;
    color: $light-font-color;

    em {
      letter-spacing: 1px;
    }
  }
}

// Navigation
aside nav ul {
  margin-bottom: 1.4em;
  margin-left: 0;
  font-size: 16px;
  font-weight: bold;
  list-style: none;

  li {
    margin-bottom: 0.5em;

    a {
      color: #413932;

      &.active, &:hover {
        color: $orange;
      }
    }

    ul {
      display: none;
      margin-top: 0.3em;
      margin-left: 20px;
      font-size: 13px;
      font-weight: normal;

      li {
        margin-bottom: 0;

        a.active {
          font-weight: bold;
        }
      }

      &.expanded {
        display: block;
      }
    }
  }
}

.bottom-nav {
  @extend .callout;
  @include clearfix;
  margin-top: 2em;
  font-weight: bold;

  .previous {
    float: left;
  }

  .next {
    float: right;
  }
}

section.about {
  &.current {
    display: block;
  }

  .bottom-nav {
    display: none;
  }
}

p.center {
  text-align: center;
}

#logo-license {
  @extend .callout;
  padding: 20px !important;
  margin-top: 2em;

  p {
    font-size: 12px;
    line-height: 1.4;
    color: $light-font-color;
  }

  p + p {
    margin-top: 14px;
  }

  img {
    float: left;
    margin-right: 20px;
  }
}

.callout.downloading {
  background: $callout-color url($baseurl + "images/icons/download.png") 24px 24px no-repeat;
  padding: 20px 30px 20px 100px !important;

  h3 {
    font-size: 18px;
    color: $orange;
  }

  p {
    margin-bottom: 15px !important;
    font-size: 15px;
    line-height: 1.3em;
  }

  p.small {
    margin-bottom: 0 !important;
    font-size: 12px;
    line-height: 1.4;
    color: $light-font-color;
  }
}

.section-nav-container {
  @extend .unstyled !optional;
  position: relative;
  background-color: #ebe9e1;
  background-color: rgba(223, 221, 213, 0.33);
  @include border-radius(3px);
  padding: 8px 12px 6px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: bold;

  .light {
    font-weight: normal;
  }

  a {
    font-weight: bold;
    position: relative;
  }

  .dropdown-panel {
    top: 33px;

    .three-column {
      @include clearfix;

      .column-left {
        float: left;
        width: 31%;
        padding-right: 3%;
      }

      .column-middle {
        float: left;
        width: 31%;
        padding-right: 3%;
      }

      .column-right {
        float: left;
        width: 31%;
      }
    }
  }
}

// Dropdowns
a.dropdown-trigger {
  padding: 4px 5px;
  border: solid 1px transparent;

  &.active {
    position: relative;
    z-index: 200;
    background-color: #fff !important;
    @include border-top-left-radius(3px);
    @include border-top-right-radius(3px);
    border: solid 1px darken($base-border-color, 8%);
    border-bottom: 0;
  }
}

.dropdown-panel {
  position: absolute;
  z-index: 199;
  display: none;
  background-color: #fff;
  border: solid 1px darken($base-border-color, 8%);
  @include border-radius(3px);
  @include box-shadow(0 1px 2px #ccc);

  &.left {
    @include border-top-left-radius(0);
  }

  &.right {
    @include border-top-right-radius(0);
  }
}

// Footer
footer {
  padding: 20px 0 40px;
  margin-top: 35px;
  clear: both;
  @include clearfix;
  font-size: 12px;
  line-height: $base-line-height * 0.7;
  color: $light-font-color;
  border-top: solid 1px $base-border-color;

  a {
    color: darken($light-font-color, 35%);

    &:hover {
      color: darken($light-font-color, 55%);
    }
  }

  .site-source {
    float: left;
    padding-left: 46px;
    @include background-image-2x($baseurl + "images/icons/code", 38px, 23px, 0 2px);
  }

  .sfc-member {
    float: right;
    text-align: right;
  }
}

table.benchmarks {
  width: 100%;
  padding: 20px;
  margin-bottom: 20px;

  tr {
    th.right {
      text-align: center;
    }

    td.desc {
      font-size: 0.8em;
      color: #888;
    }

    td.number {
      font-family:monospace;
      text-align: right;
    }

    td {
      padding: 0 10px;
    }
  }
}
// scrollToTop
.scrollToTop {
  @include border-radius(50px);
  display: none;
  position: fixed;
  background-color: rgba(223, 221, 213, 0.33);
  right: 20px;
  bottom: 6.25rem;
  padding: 0.8rem;
  height: 20px;
  transition: background-color 0.2s;
  width: 20px;
  &:hover{
    background-color: rgba(250, 250, 250, 0.9);
    @include box-shadow(2px);
    &::before {
      @include center-transformX;
      width: 0;
      height: 0;
      color: var(--color-neutral-emphasis-plus);
      content: "";
      border: 6px solid transparent;
      border-color:$black-3 transparent transparent;
      top: -0.55rem;
      position: absolute;
    }
    &::after {
      @include center-transformX;
      top: -2rem;
      border-radius: 4px;
      position: absolute;
      content: attr(data-label);
      word-wrap: break-word;
      white-space: pre;
      padding: .5em .75em;
      color:$callout-color;
      background-color:$black-3;
      font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
    }
  }
}
.no-js{
  &.scrollToTop {
    display: block;
  }
}

// Breakpoint ----------------
@media (max-width: $default) {
  .responsive-table { overflow-x: auto; }
  .center img { height: 100%; }
  header{
      padding-bottom: 2.5rem;
    a, span {
      padding-left: 1rem;
      margin-bottom: 10px ;
    }
  }
  #home { .inner { > header { padding-bottom: 2rem; } } }
  #content { width: 100%; }
  .inner { width: 100%; }
  #content-wrapper { padding: 0.8rem; }

  #masthead {
    height: unset;
    .inner {
      display: flex;
      margin-top: 1.8rem;
      div:first-of-type {
        padding:1rem;
      }
      .illustration-wrapper {
        display: flex;
        align-items: center;
      }
      p { width: unset; }
      img.illustration {
        position: unset;
        right: unset;
        top: unset;
        max-height: 100%;
      }
    }
  }
  footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
// Mobile
@media (max-width: $mobile-m) {
  header {
    padding-bottom: 3rem;
    #tagline {
      font-size: 0.8rem;
      top: 0;
      padding-right: 1rem;
    }
  }
  #home { .inner { > header { padding-bottom: 2.5rem; } } }
  #masthead {
    .inner { flex-direction: column-reverse; }
    .illustration-wrapper {
      @include flex-center;
      overflow: hidden;
      .illustration {
        width: 80%;
        height: 100%;
      }
    }
  }
  #main {
    >.two-column {
      .column-right {
        position: relative;
        @include flex-center;
      }
    }
    .two-column {
      @include flex-column;
      .column-left, .column-right {
        width: 100%;
      }
    }
  }
  // Topics dropdown
  #book-chapters,
  #reference-version {
    .dropdown-panel {
      width: unset;
      .three-column {
        @include flex-column;
        height: 70vh;
        overflow-y: scroll;
        overflow-x: hidden;
        .column-left,
        .column-middle,
        .column-right {
          width: 100%;
          max-width: 300px;
        }
        .unstyled {
          a {
          padding: 0.15rem 0;
          display: block;
          }
        }
        .chapter{
          h2 {
            display: flex;
            align-items: center;
            a { padding-left: 5px; }
          }
          ol {
            li {
              display: flex;
              align-items: center;
              margin-bottom: 6px;
              padding: 0.45rem 0;
               a { padding-left: 5px;}
            }
          }
        }
      }
    }
  }
  footer {
    @include flex-center;
    flex-direction: column;
    align-items: center;
    .site-source {
      margin-bottom: 1rem;
    }
  }
  .scrollToTop {
    bottom: 6rem;
  }
}
